<template>
  <div class="home">
    <div class="home-header-cntainer">
      <div>admin</div>
      <div>logout</div>
      <div>
        <img src="../assets/cart.png" alt @click="tocart" />
      </div>
    </div>
    <div class="home-content">
      <div class="home-sotr-container">
        <div class="sotr-by">Sort by</div>
        <div class="sort-default">Default</div>
        <div class="sotr-price">
          <div @click="onSotr">Price</div>
          <div v-show="!imgshow">
            <img src="../assets/down.png" alt />
          </div>
          <div v-show="imgshow">
            <img src="../assets/up.png" alt />
          </div>
        </div>
      </div>
      <div class="home-content-wrapper">
        <!-- 左侧内容 -->
        <div class="home-slider">
          <h4>PRICE:</h4>
          <div
            v-for="(item,index) in sliderlist"
            :key="index"
            :class="current===index?'slider-left-item-active':'slider-left-item'"
            @click="changecurrent(index,item)"
          >{{item.title}}</div>
        </div>
        <!-- 右侧商品列表 -->
        <div class="home-right">
          <el-row :gutter="10">
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(item,index) in storeshow "
              :key="index"
            >
              <div class="home-right-item">
                <div class="store-item-img">
                  <img :src="item.productImage" alt />
                </div>
                <div class="store-right">
                  <div class="store-item-name">{{item.productName}}</div>
                  <div class="store-item-price">{{item.salePrice}}</div>
                  <div class="store-item-tocart" @click="onClick(item)">加入购物车</div>
                </div>
              </div>
              <!-- 窗口768内容 -->
              <div class="show-right-item">
                <div class="show-item-img">
                  <img :src="item.productImage" alt />
                </div>
                <div class="show-right">
                  <div class="show-item-name">{{item.productName}}</div>
                  <div class="show-item-price-wrapper">
                    <div class="show-item-price">{{item.salePrice}}</div>
                    <div class="show-item-tocart">加入购物车</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="loading-container" v-show="loading">
      <img src="../assets/loading.jpg" alt />
    </div>
  </div>
</template>

<script>
import "../css/home.css";
import Axios from "axios";
export default {
  data() {
    return {
      sliderlist: [],
      storelist: [],
      storeshow: [],
      current: 0,
      imgshow: false,
      sortadd: 1,
      loading: false,
      bool: false
    };
  },
  methods: {
    // 点击切换内容
    changecurrent(index, item) {
      // console.log(item)
      this.current = index;
      let temp = [];
      if (item.title == "ALL") {
        temp = this.storelist;
      } else {
        this.storelist.forEach(ele => {
          if (ele.salePrice <= item.hight && ele.salePrice > item.low) {
            temp.push(ele);
          }
        });
      }
      this.storeshow = temp;
    },
    onSotr() {
      this.sortadd++;
      if (this.sortadd > 2) {
        this.sortadd = 1;
      }

      if (this.sortadd === 1) {
        this.imgshow = !this.imgshow;
        var low = function(a, b) {
          return a.salePrice - b.salePrice;
        };
        this.storeshow = this.storeshow.sort(low);
      } else if (this.sortadd === 2) {
        this.imgshow = !this.imgshow;
        var hight = function(a, b) {
          return b.salePrice - a.salePrice;
        };
        this.storeshow = this.storeshow.sort(hight);
      }
    },
    tocart() {
      this.$router.push("Cart");
    },
    onClick(item) {
      this.$store.dispatch("getcartlist", item);
    }
  },

  mounted() {
    Axios.get("http://localhost:8080/data.json")
      .then(resp => {
        // window.console.log(resp.data.result)
        this.sliderlist = resp.data.result.slider;
        this.storelist = resp.data.result.list;
        this.storeshow = resp.data.result.list;
        // window.console.log(this.storelist)
        // window.console.log(this.sliderlist)
      })
      .catch(error => {
        window.console.log(error);
      }),
      window.addEventListener("scroll", () => {
        // 获取文档高度
        var docHeight = document.documentElement.scrollHeight;
        // 获取可视区域高度
        var cilHeight = document.documentElement.clientHeight;
        // 获取滚动距离
        var scroffset = document.documentElement.scrollTop;
        var btn = docHeight - scroffset - cilHeight;
        // console.log(btn)
        if (btn <= 0) {
          this.loading = true;
          if (this.bool == true) {
            // window.console.log(this.bool)
            window.setTimeout(() => {
              Axios.get("http://localhost:8080/data3.json")
                .then(resp => {
                  this.storelist = [
                    ...this.storelist,
                    ...resp.data.result.list
                  ];
                  this.storeshow = [...this.storelist];
                  // window.console.log(this.storelist)
                  // window.console.log(this.storeshow)
                  this.bool = null;
                  this.loading = false;
                  // window.console.log("+++",this.storeshow)
                  // return
                })
                .catch(error => {
                  window.console.log(error);
                });
            }, 3000);
          } else if (this.bool == false) {
            this.loading = true;
            // window.console.log(this.bool)
            window.setTimeout(() => {
              Axios.get("http://localhost:8080/data2.json")
                .then(resp => {
                  // window.console.log(resp)
                  this.storelist = [
                    ...this.storelist,
                    ...resp.data.result.list
                  ];
                  this.storeshow = [...this.storelist];
                  this.bool = true;
                  this.loading = false;
                  // window.console.log("+++",this.storeshow)
                  // return
                })
                .catch(error => {
                  window.console.log(error);
                });
            }, 3000);
          } else {
            window.setTimeout(() => {
              alert("暂无更多数据");
              this.loading = false;
              return;
            }, 3000);
          }
        }
      });
  }
};
</script>
